本文|产物_将Vue.js项目部署至静态网站托管，并开启Gzip压缩

篇首语：本文由编程笔记#小编为大家整理，主要介绍了将 Vue.js 项目部署至静态网站托管，并开启 Gzip 压缩相关的知识，希望对你有一定的参考价值。

摘要&＃xff1a;关于使用 nginx 开启静态网站 Gzip 压缩的教程已经有很多了&＃xff0c;但是好像没几个讲怎么在对象存储的静态网站中开启 Gzip 压缩。其实也不复杂&＃xff0c;我们一起来看下~

本文分享自华为云社区《将 Vue.js 项目部署至静态网站托管&＃xff0c;并开启 Gzip 压缩》&＃xff0c;作者&＃xff1a;云存储开发者支持团队。

关于使用 Nginx 开启静态网站 Gzip 压缩的教程已经有很多了&＃xff0c;但是好像没几个讲怎么在对象存储的静态网站中开启 Gzip 压缩。其实也不复杂&＃xff0c;我们一起来看下~

1.打包项目

1.1 先安装 compression-webpack-plugin 插件&＃xff1a;

npm install compression-webpack-plugin --save-dev

1.2 在 vue.config.js 中开启压缩插件(项目下没有此文件可以在根目录下创建):

const CompressionWebpackPlugin &＃61; require(&＃39;compression-webpack-plugin&＃39;);
module.exports &＃61; defineConfig(
transpileDependencies: true,
configureWebpack: config &＃61;>
config.externals &＃61;
if (process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39;)
return
plugins: [new CompressionWebpackPlugin(
test: /\\.js$|\\.html$|\\.css/, // 压缩文件的后缀
threshold: 1024, // 对超过 1k 的文件进行压缩
deleteOriginalAssets: true, // 不需要保留压缩前文件
)]



)

1.3 运行 npm run build 打包项目&＃xff0c;打包后打开打包产物目录&＃xff0c;可以看到文件后缀有 .gz

2.开启静态网站托管并上传网站

2.1 创建桶并开启静态网站托管

进入对象存储控制台&＃xff0c;点击右上角创建桶。

此处示例项目比较简单&＃xff0c;默认首页和默认 404 页面均填写 index.html&＃xff0c;不需要配置重定向规则

这个网址即是网站地址

此时点击打开会提示 404&＃xff0c;因为我们还没有上传网站文件&＃xff0c;接下来会上传网站文件并配置 Gzip 压缩。

2.1.1 配置域名解析

在配置静态网站时&＃xff0c;可以看到有提示从 22 年 3 月开始 OBS 禁止通过默认域名&＃xff08;桶访问域名或静态网站访问域名&＃xff09;使用静态网站托管功能。如果是新创建的桶&＃xff0c;必须要配置桶域名才能访问。

点击左侧域名管理&＃xff0c;点击绑定用户域名

设置完成后&＃xff0c;需要去自己的域名供应商处将域名 CNAME 指向 OBS 桶域名&＃xff0c;等待一会儿解析生效。

2.2 上传静态网站并配置 Gzip 压缩

这里先讲两个错误步骤和错误的原因原因&＃xff0c;太长不看可跳转 # 2.2.2 正确方案 &＃xff0c;更推荐直接参考 # 3 更进一步--自动设置元数据

2.2.1 试错手动方案

由于对象存储的对象名强唯一的&＃xff0c;即并不会自动把 xxx.js 指向 xxx.js.gz&＃xff0c;此时如果直接把 dist 目录下文件上传到对象存储并开启静态网站托管&＃xff0c;会发现浏览器找不到 .gz 文件&＃xff0c;会报错 404&＃xff0c;页面一片空白。

去除后缀后&＃xff0c;请求没报错 404 了&＃xff0c;但是页面还是一片空白&＃xff0c;这又是为啥&＃xff1f;

2.2.2 正确方案

1. 手动将所有对象的 .gz 后缀去掉
2. 挨个去给去过后缀的对象添加元数据&＃xff1a;Content-Encoding: gzip

3. 更进一步 —— 自动设置元数据

本文用的示例项目比较简单&＃xff0c;只有三个文件需要改&＃xff0c;手工改还不麻烦&＃xff0c;但是对与复杂项目可能要几十上百个文件&＃xff0c;处理起来就非常麻烦&＃xff0c;程序员的思路就是能代码解决就不要动手&＃xff0c;这里我们使用 数据工坊 DWR 服务自动改文件名 &＃43; 改后缀。这里的介绍比较简单&＃xff0c;如果想使用 DWR 进行更为复杂的操作&＃xff0c;可以参考这篇博文

3.1 创建函数

首先进入 FunctionGraph 服务&＃xff0c;创建一个修改文件名和元数据的 Serverless 函数。记得切换下 region&＃xff0c;选择目标 OBS 桶所在 Region。

函数内容为

# -*- coding:utf-8 -*-
from urllib.parse import unquote_plus
from obs import ObsClient, SetObjectMetadataHeader
def handler(event, context):
# 获取桶名与对象名
region_id, bucket_name, object_name &＃61; get_obs_obj_info(event.get("Records", None)[0])
context.getLogger().info(f"bucket name: bucket_name, object key: object_name")
ak &＃61; context.getAccessKey()
sk &＃61; context.getSecretKey()
server &＃61; &＃39;obs.&＃39; &＃43; region_id &＃43; &＃39;.myhuaweicloud.com&＃39;
obs_client &＃61; ObsClient(access_key_id&＃61;ak, secret_access_key&＃61;sk, server&＃61;server)
# 获取对象
object_content &＃61; obs_client.getObject(bucket_name, object_name, loadStreamInMemory&＃61;False)
# 去掉 .gz 后缀
new_object_name &＃61; object_name[:-3]
# 重新上传
resp &＃61; obs_client.putObject(bucket_name, new_object_name, content&＃61;object_content.body.response)
# 设置元数据
headers &＃61; SetObjectMetadataHeader(contentEncoding&＃61;"gzip")
obs_client.setObjectMetadata(bucket_name, new_object_name, headers&＃61;headers)
context.getLogger().info("Upload Success")
return
def get_obs_obj_info(record):
if &＃39;s3&＃39; in record:
s3 &＃61; record[&＃39;s3&＃39;]
return record["eventRegion"], s3[&＃39;bucket&＃39;][&＃39;name&＃39;], unquote_plus(s3[&＃39;object&＃39;][&＃39;key&＃39;])
else:
obs_info &＃61; record[&＃39;obs&＃39;]
return record["eventRegion"], obs_info[&＃39;bucket&＃39;][&＃39;name&＃39;], \\
unquote_plus(obs_info[&＃39;object&＃39;][&＃39;key&＃39;])

添加 OBS SDK 依赖包

3.2 创建工作流

进入DWR 服务控制台&＃xff0c;点击创建工作流

在左侧算子目录找到自定义&＃xff0c;拖到中间添加连接线并在右侧选择函数&＃xff0c;点击保存

桶名选择静态网站托管的桶&＃xff0c;事件源类型为 ObjectCreated&＃xff0c;即任何上传行为均会触发&＃xff0c;后缀填写 .gz&＃xff0c;即只有压缩类型的文件才会触发。

3.3 上传文件

重新在 Vue 项目根目录运行 npm run build 打包项目&＃xff0c;这次不需要再去手动改后缀了&＃xff0c;直接把打包后结果整个拖入到上传框点击上传

4. 验证已开启 Gzip 压缩

配置完成后&＃xff0c;再次访问静态网站地址&＃xff0c;发现已经成功&＃xff0c;分析请求响应内容也都是压缩后的

点击关注&＃xff0c;第一时间了解华为云新鲜技术~